<template>
	<view class="integralDetailPage">
		<view class="integral-total">
			<text class="text">我的积分</text>
			<view class="integral-number">
				<text class="myintegral">{{integral}}</text>
				<image class="goods-icon" src="/static/vMall/integralIcon.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="integral-detail">
			<text class="tag">积分明细</text>
			<view class="detail-content">
				<view class="detail-box" v-for="(item,index) in orderList" :key="index">
					<view class="cell-lf">
						<text class="detail-text">{{item.title}}</text>
						<text class="detail-date">{{item.date}}</text>
					</view>
					<text class="detail-integral disabled" :class="[item.className]">
						{{item.integral}}
					</text>
				</view>
				<u-loadmore :status="isLoading?'loading': (pageParams.pageNumber >= pageParams.totalPages ? 'nomore' : 'loadmore')" loading-text="正在加载" loadmore-text="加载更多"
					nomore-text="没有更多了" color="#d0d0d0" />
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getUser } from '@/utils/vmall.js';
	export default {
		data() {
			return {
				integral: '',
				orderList: [],
				pageParams:{
					pageSize: 20,
					pageNumber: 1,
					total:1,
					totalPages:1,
				},
				userInfo: {},
				isLoading: false
			};
		},
		onLoad(){
			console.log('onload detail')
			getUser().then(info => {
				this.userInfo = info
				this.getIntegralPage()
				this.getUserIntegral()
			})
		},
		onReachBottom() {
			if (!this.isLoading) {
				if (this.pageParams.pageNumber < this.pageParams.totalPages) {
					this.pageParams.pageNumber++
					this.pageQuery()
				} else {
					
				}
			}
		},
		onPullDownRefresh() {
			
		},
		methods: {
			pageQuery() {
				this.isLoading = true
				this.getIntegralPage()
			},
			getIntegralPage(){
				this.$request.get(this.$api.integralDetail, {
					pageNo: this.pageParams.pageNumber,
					pageSize: this.pageParams.pageSize,
					userId: this.userInfo.id
				}).then(res => {
					// 加载状态重置
					uni.hideLoading()
					this.isLoading = false
					const { success, result } = res
					if (success) {
						const { records, total, pages } = result
						const orderList = records.map((item, index) => {
							let integralSign = Number(item.type) == 1 ? '+' : '-' 
							let integral = integralSign + item.integral
							let className = Number(item.type) == 1 ? 'blue' : 'grey'
							return {
								id: index + 1,
								title: item.taskName,
								date: item.createTime,
								integral,
								className
							}
						})
						this.orderList = this.orderList.concat(orderList)
						this.pageParams.total = total
						this.pageParams.totalPages = pages
					} else {
						this.goodsList = []
						this.$appFunc.msg('获取积分失败')
					}
				})
			},
			getUserIntegral() {
				this.$request.get(this.$api.getUserById, {
					id: this.userInfo.id
				}).then(result => {
					this.integral = result.result.integral;
				})
			}
		}
	}
</script>

<style lang="scss">
@import "@/style/variable.scss";
	.integralDetailPage {
		padding: 15rpx;
		height: 500rpx;
		.integral-total{
			background-image: url();
			background-position: 100% center;
			background-repeat: no-repeat;
			background-size:100% 100%;
			color:$font-color-white;
			width:720rpx;
			height:330rpx;
			overflow: hidden;
			.text,.integral-number{
				margin-left:45rpx;
			}
			.text{
				font-size:$font-sm;
				margin:70rpx auto 21rpx 45rpx;
				display:block;
			}
			.integral-number{
				margin-bottom:74rpx;
				color:$font-color-white;
				display:flex;
				justify-content: flex-start;
				align-items: center;
				.myintegral{
					font-weight:600;
					font-size:94rpx;
					margin-right:10rpx;
				}
				.goods-icon{
					width:37rpx;
					height: 37rpx;
					display:inline-block;
					overflow:hidden;
				}
			}
		}
		.integral-detail{
			@include myCard;
			margin:10rpx 0;
			padding-bottom: 40rpx;
			.tag,.detail-content{
				display: block;
				width:calc(100% - 90rpx);
				margin:0 auto;
			}
			.tag{
				font-size:$font-lg;
				color:$font-color-black;
				padding:51rpx 0 26rpx;
				font-weight:600;
				border-bottom:1px dashed $border-color-grey;
			}
			.detail-content{
				.detail-box{
					border-bottom:1px dashed $border-color-grey;
					display:flex;
					align-items: center;
					.cell-lf{
						display:block;
						overflow:hidden;
						width:60%;
						font-size:$font-sm;
						padding:20rpx 0;
						.detail-text{
							color:$font-color-black;
							text-overflow: ellipsis;
							overflow:hidden;
							white-space: nowrap;
							width:100%;
							display:block;
						}
						.detail-date{
							color:$font-color-grey;
							margin-top: 10rpx;
							display: block;
						}
					}
					.detail-integral{
						@include myIntegral;
						display:block;
						width:40%;
						text-align: right;
						background-size: 21rpx 21rpx;
					}
					.grey{
						color:$font-color-grey;
					}
					.blue {
						color:$uni-color-primary;
					}
				}
			}
		}
		
	}
</style>
